<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客流</title>
    <link rel="stylesheet" href="static/css/style.css">
    <script src="static/js/jquery.min.js"></script>
</head>
<body>
    <header class="header">
        <a href="#" class="back-btn">返回</a>
        <h1 class="header-title">客流</h1>
    </header>

    <div class="filter-bar">
        <div class="select-box">
            <div class="select-display">
                <span>选择服务区</span>
                <span>▼</span>
            </div>
            <div class="select-options">
                <div class="select-option">选择全部服务区</div>
                <div class="select-option parent">
                    <div class="parent-title">燕赵分公司</div>
                    <div class="child-box">
                        <div class="select-option child">山海关服务区</div>
                        <div class="select-option child">迁安服务区</div>
                        <div class="select-option child">深圳服务区</div>
                    </div>
                </div>
                <div class="select-option parent">
                    <div class="parent-title">燕赵分公司</div>
                    <div class="child-box">
                        <div class="select-option child">山海关服务区</div>
                        <div class="select-option child">迁安服务区</div>
                        <div class="select-option child">深圳服务区</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="time-filters">
            <button class="time-filter">本年</button>
            <button class="time-filter">本月</button>
            <button class="time-filter">本周</button>
            <button class="time-filter active">上日</button>
        </div>
    </div>

    <div class="total-flow">
        总客流 <span class="total-number">28372</span><span class="unit">单位：万人</span>
    </div>

    <div class="service-area">
        <div class="area-header">
            <span class="area-name">深圳服务区北区</span>
            <span class="area-total">1382</span>
        </div>
        <div class="gender-grid">
            <div class="gender-item">
                <img src="static/img/nance.png" alt="男性图标">
                <div class="gender-info">
                    <div class="gender-number">182</div>
                    <div class="gender-type">男</div>
                </div>
            </div>
            <div class="gender-item">
                <img src="static/img/nvce.png" alt="女性图标">
                <div class="gender-info">
                    <div class="gender-number">182</div>
                    <div class="gender-type">女</div>
                </div>
            </div>
        </div>
    </div>

    <div class="service-area">
        <div class="area-header">
            <span class="area-name">山海关服务区北区</span>
            <span class="area-total">1382</span>
        </div>
        <div class="gender-grid">
            <div class="gender-item">
                <img src="static/img/nance.png" alt="男性图标">
                <div class="gender-info">
                    <div class="gender-number">182</div>
                    <div class="gender-type">男</div>
                </div>
            </div>
            <div class="gender-item">
                <img src="static/img/nvce.png" alt="女性图标">
                <div class="gender-info">
                    <div class="gender-number">182</div>
                    <div class="gender-type">女</div>
                </div>
            </div>
        </div>
    </div>
    <script src="static/js/common.js"></script>
</body>
</html>